<template>
  <div>
    <h2 class="about">about</h2>
    <p>{{ name }}</p>
    <el-child ref="usernameInput" />
    <button @click="getChildRef">get child ref</button>
    <VuexTest />
    <el-button type="primary"></el-button>
  </div>
</template>

<script>
import Child from "../components/Child";
import VuexTest from "../components/VuexTest";

export default {
  components: {
    "el-child": Child,
    VuexTest
  },
  computed: {
    username() {
      console.log(this.$route);

      // 我们很快就会看到 `params` 是什么
      return this.$route.params;
    }
  },
  data() {
    return {
      name: "222"
    };
  },
  provide() {
    return {
      setName: this.setName
    };
  },
  methods: {
    setName(name = "aaa") {
      this.name = name;
    },
    getChildRef() {
      // console.log(this.$refs.usernameInput.$el.querySelector("input").focus());
    }
  }
};
</script>

<style scoped>
.about {
  color: #42b983;
}
</style>
